<template>
    <el-popover placement="bottom" trigger="click" v-model="popShow" width="232" popper-class='col_pop' @show="showPopover">
        <el-checkbox-group v-model="checkList">
            <div v-for="item in disposeGroup" :key="item.label" class="group_div">
                <el-checkbox :label="item.label" style="width:100%">{{item.name}}</el-checkbox>
            </div>
        </el-checkbox-group>
        <div class="operate">
            <el-button size="mini" @click="popShow = false">取 消</el-button>
            <el-button type="primary" size="mini" @click="confirm">确 定</el-button>
        </div>
        <el-button size="mini" class="iconfont icon-liepeizhi" style="height:28px;line-height:10px" slot="reference"></el-button>
    </el-popover>
</template>

<script>
    export default {
        data() {
            return {
                popShow: false,
                checkList: [],
                saveSelectStatusList:[],
            }
        },
        props: {
            disposeGroup: {
                type: Array,
                default: () => []
            },
        },
        watch: {
            // 解决父组件异步获取数据子组件获取数据为undefined
            disposeGroup:{
                handler:function(disposeGroup){
                    let filterCheckList = []
                    filterCheckList = disposeGroup.filter(i => i.state)
                    this.checkList = filterCheckList.map(i => i.label) //获取标识勾选状态的集合
                    this.saveSelectStatusList = this.checkList //保存标识勾选状态的集合
                },
                deep:true
            },
        },
        methods: {
            showPopover() {
                this.checkList = this.saveSelectStatusList
            },
            confirm(){
                this.disposeGroup.forEach(i => i.state = this.checkList.includes(i.label))
                this.$emit('handleChangeDiposeGroup', this.disposeGroup)
                this.popShow = false
            },
        }
    }
</script>
